<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Widget with Resize Plugin under constraints</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Widget with Resize Plugin under constraints</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
<p>This example shows a weather widget that loads information from YQL, and implements a constrained resize-plugin. The end result is a widget that's draggable and resizable between mini and detail view.</p>
</div>

<div class="example">
    <style>

.example .yui3-overlay h1, .yui3-overlay h2, .yui3-overlay h3, .yui3-overlay h4, .yui3-overlay h5 {
  color:#666;
  -webkit-text-shadow: 0px 1px 1px white;
  -moz-text-shadow: 0px 1px 1px white;
  text-shadow: 0px 1px 1px white;
  border-bottom:none; 
  font-weight:lighter;
}
.example .yui3-overlay {
    background:white;
    color:black;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.8);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.8);
    border:1px solid #333;
}

.example .yui3-overlay .yui3-widget-hd {
  background: #499bea;
  background: -moz-linear-gradient(top, #499bea 0%, #207ce5 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#499bea), color-stop(100%,#207ce5));
  background: -webkit-linear-gradient(top, #499bea 0%,#207ce5 100%);
  background: -o-linear-gradient(top, #499bea 0%,#207ce5 100%);
  background: -ms-linear-gradient(top, #499bea 0%,#207ce5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 );
  background: linear-gradient(top, #499bea 0%,#207ce5 100%);
  -webkit-text-shadow: 0px 1px 1px #4FBCF7;
  -moz-text-shadow: 0px 1px 1px #4FBCF7;
  text-shadow: 0px 1px 1px #4FBCF7;
  color: #0F4C82;
  font-weight:bold;
  height:30px;
  font-size:16px;
  text-align:center;
  padding-top:10px;
  border-radius:3px;
}
.example .yui3-overlay #weatherWidgetContent {
  overflow:hidden;
}
.example .yui3-overlay .yui3-widget-bd {
  background: #e0eff9;
  background: -moz-linear-gradient(top, #e0eff9 0%, #ffffff 4%, #f2f2f2 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0eff9), color-stop(4%,#ffffff), color-stop(100%,#f2f2f2));
  background: -webkit-linear-gradient(top, #e0eff9 0%,#ffffff 4%,#f2f2f2 100%);
  background: -o-linear-gradient(top, #e0eff9 0%,#ffffff 4%,#f2f2f2 100%);
  background: -ms-linear-gradient(top, #e0eff9 0%,#ffffff 4%,#f2f2f2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0eff9', endColorstr='#f2f2f2',GradientType=0 );
  background: linear-gradient(top, #e0eff9 0%,#ffffff 4%,#f2f2f2 100%);
}
.example .yui3-overlay #weatherWidgetContent #mainContainer, .example .yui3-overlay #weatherWidgetContent #futureDays  {

  color:#333;

}

#mainContainer {
    padding:10px;
    height:60px;
    width:85%;
    margin:0 auto;

}

#mainContainer #temp {
  font-size:20px;
  margin: 0 auto auto 10px;
  position: absolute;
  top: 66px;
  left:81px;
}
#futureDays .day {
  float:left;
  padding:10px;
  border-top:1px solid #ddd;
  background:#EDF3F7;

}
#futureDays h3, #futureDays h4 {
  margin:5px 0;
  text-align:center;
}
#futureDays h3 {
  font-size:90%;
  color: #5ea3d3;
}
#futureDays h4 {
  margin: 5px 0;
  text-align: center;
  font-weight: bold;
  color: #304166;
}
#mainContainer .clearfix {
  clear:both;
}
#weatherWidget {
    display: none;
}
#weatherWidget.yui3-overlay-content {
    display: block;
}

</style>


<div id="weatherWidget">
    <div class="yui3-widget-hd">Toronto Conditions</div>
    <div class="yui3-widget-bd" id="weatherWidgetContent"></div>
</div>

<h2>What's the weather like?</h2>
<p>This little widget shows the weather forecast in Toronto. It's resizable, draggable, and implements the <code>ResizeConstrained</code> plugin. You can resize it between a simple and detailed view.</p>

<p>
    <input type='button' class=".exampleBtn" id='launchOverlay' value="Loading Components..." disabled>
</p>

<script>
    YUI().use('overlay', 'resize-plugin', 'resize-constrain', 'dd-plugin', 'yql', function(Y) {

      var weatherWidget;

      var getWeather = function() {
        
        Y.YQL('select * from wunderground.forecast where location="Toronto,ON";', processWeather);
      };

      var processWeather = function(r) {

        var weather = r.query.results.forecast.simpleforecast.forecastday,
        template = {

          currentTemp: '<div id="mainContainer"><img id="mainImage" src="{mainImage}"><h2 id="temp">{temp} &#176;F and {condition}</h2></div>',
          otherDays: '<div class="day"><h3 class="dayOfWeek">{dayOfWeek}</h3><img src="{image}"><h4 class="forecast">{dayForecast} &#176;F</h4></div>'
        },

        currentData = {
          mainImage: weather[0].icons.icon_set[9].icon_url,
          temp: weather[0].high.fahrenheit,
          condition: weather[0].conditions
        },

        currentHTML = '',
        futureHTML = '<div id="futureDays">';

        currentHTML = Y.Lang.sub(template.currentTemp, currentData);
        

        for (var i = 1; i < weather.length; i++) {

          var futureData = {
            dayOfWeek: weather[i].date.weekday,
            image: weather[i].icons.icon_set[9].icon_url,
            dayForecast: weather[i].high.fahrenheit
          };
          futureHTML += Y.Lang.sub(template.otherDays, futureData);
          
        }

        futureHTML += "</div>";
        currentHTML = currentHTML + futureHTML;
        Y.one('#weatherWidgetContent').append(currentHTML);

        createOverlay();
    };

    var createOverlay = function() {
      
      weatherWidget = new Y.Overlay({
         width: "370px",
         height:"245px",
         srcNode: "#weatherWidget",
         visible: false,
         zIndex:5,
         align: {node:".example", points:["tc", "bc"]}
      });

      //allow resizability and draggability
      weatherWidget.plug([Y.Plugin.Resize, Y.Plugin.Drag]);

      //we can plug in the resizeConstrained plugin on the 'resize' namespace
      weatherWidget.resize.plug(Y.Plugin.ResizeConstrained, {
        minWidth: 369,
        minHeight: 120,
        maxWidth: 369,
        maxHeight: 245,
        preserveRatio: false
      });

      weatherWidget.render();
      Y.one('#launchOverlay').set('disabled', false).set('value', 'Launch Weather Widget');
    };

    getWeather();

    Y.one("#launchOverlay").on('click', function() {
       weatherWidget.set('visible', true); 
    });

});

</script>


</div>

<h3>Setting up the HTML</h3>
<p>First we create the HTML for the page. This consists of a weatherWidget div with header and body wrappers, along with some other content on the page.</p>

<pre class="code prettyprint">&lt;div id=&quot;weatherWidget&quot;&gt;
    &lt;div class=&quot;yui3-widget-hd&quot;&gt;Toronto Conditions&lt;&#x2F;div&gt;
    &lt;div class=&quot;yui3-widget-bd&quot; id=&quot;weatherWidgetContent&quot;&gt;&lt;&#x2F;div&gt;
&lt;&#x2F;div&gt;

&lt;h2&gt;What&#x27;s the weather like?&lt;&#x2F;h2&gt;
&lt;p&gt;This little widget shows the weather forecast in Toronto. It&#x27;s resizable, draggable, and implements the &lt;code&gt;ResizeConstrained&lt;&#x2F;code&gt; plugin. You can resize it between a simple and detailed view.&lt;&#x2F;p&gt;

&lt;p&gt;
    &lt;input type=&#x27;button&#x27; class=&quot;.exampleBtn&quot; id=&#x27;launchOverlay&#x27; value=&quot;Loading Components...&quot; disabled&gt;
&lt;&#x2F;p&gt;</pre>


<p>Next, we add CSS, including CSS3 gradients to spruce up the widget.</p>

<pre class="code prettyprint">.example .yui3-overlay h1, .yui3-overlay h2, .yui3-overlay h3, .yui3-overlay h4, .yui3-overlay h5 {
  color:#666;
  -webkit-text-shadow: 0px 1px 1px white;
  -moz-text-shadow: 0px 1px 1px white;
  text-shadow: 0px 1px 1px white;
  border-bottom:none; 
  font-weight:lighter;
}
.example .yui3-overlay {
    background:white;
    color:black;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.8);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.8);
    border:1px solid #333;
}

.example .yui3-overlay .yui3-widget-hd {
  background: #499bea;
  background: -moz-linear-gradient(top, #499bea 0%, #207ce5 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#499bea), color-stop(100%,#207ce5));
  background: -webkit-linear-gradient(top, #499bea 0%,#207ce5 100%);
  background: -o-linear-gradient(top, #499bea 0%,#207ce5 100%);
  background: -ms-linear-gradient(top, #499bea 0%,#207ce5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#x27;#499bea&#x27;, endColorstr=&#x27;#207ce5&#x27;,GradientType=0 );
  background: linear-gradient(top, #499bea 0%,#207ce5 100%);
  -webkit-text-shadow: 0px 1px 1px #4FBCF7;
  -moz-text-shadow: 0px 1px 1px #4FBCF7;
  text-shadow: 0px 1px 1px #4FBCF7;
  color: #0F4C82;
  font-weight:bold;
  height:30px;
  font-size:16px;
  text-align:center;
  padding-top:10px;
  border-radius:3px;
}
.example .yui3-overlay #weatherWidgetContent {
  overflow:hidden;
}
.example .yui3-overlay .yui3-widget-bd {
  background: #e0eff9;
  background: -moz-linear-gradient(top, #e0eff9 0%, #ffffff 4%, #f2f2f2 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0eff9), color-stop(4%,#ffffff), color-stop(100%,#f2f2f2));
  background: -webkit-linear-gradient(top, #e0eff9 0%,#ffffff 4%,#f2f2f2 100%);
  background: -o-linear-gradient(top, #e0eff9 0%,#ffffff 4%,#f2f2f2 100%);
  background: -ms-linear-gradient(top, #e0eff9 0%,#ffffff 4%,#f2f2f2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#x27;#e0eff9&#x27;, endColorstr=&#x27;#f2f2f2&#x27;,GradientType=0 );
  background: linear-gradient(top, #e0eff9 0%,#ffffff 4%,#f2f2f2 100%);
}
.example .yui3-overlay #weatherWidgetContent #mainContainer, .example .yui3-overlay #weatherWidgetContent #futureDays  {

  color:#333;

}

#mainContainer {
    padding:10px;
    height:60px;
    width:85%;
    margin:0 auto;

}

#mainContainer #temp {
  font-size:20px;
  margin: 0 auto auto 10px;
  position: absolute;
  top: 66px;
  left:81px;
}
#futureDays .day {
  float:left;
  padding:10px;
  border-top:1px solid #ddd;
  background:#EDF3F7;

}
#futureDays h3, #futureDays h4 {
  margin:5px 0;
  text-align:center;
}
#futureDays h3 {
  font-size:90%;
  color: #5ea3d3;
}
#futureDays h4 {
  margin: 5px 0;
  text-align: center;
  font-weight: bold;
  color: #304166;
}
#mainContainer .clearfix {
  clear:both;
}
#weatherWidget {
    display: none;
}
#weatherWidget.yui3-overlay-content {
    display: block;
}</pre>

<h3>The Use Statement</h3>
<p>The use statement consists of various modules that we'll need to construct this widget.</p>

<pre class="code prettyprint">YUI().use(&#x27;overlay&#x27;, &#x27;resize-plugin&#x27;, &#x27;resize-constrain&#x27;, &#x27;dd-plugin&#x27;, &#x27;yql&#x27;, function(Y) {</pre>


<p><code>resize-plugin</code> allows our overlay to be resizable. We also need to pull down the <code>resize-constrain</code> submodule to allow for constraining. The <code>dd-plugin</code> enables draggability on a widget, while the <code>yql</code> module allows us to send requests to YQL</p>

<h3>Enabling Constrained Resizing on the Widget</h3>
<p>Constrained resizing can be done by plugging in <code>Y.Plugin.Resize</code> and then plugging in <code>Y.Plugin.ResizeConstrained</code> under the <code>resize</code> namespace.</p>

<pre class="code prettyprint">weatherWidget = new Y.Overlay({
   width: &quot;250px&quot;,
   height:&quot;300px&quot;,
   srcNode: &quot;#weatherWidget&quot;,
   visible: false,
   align: {node:&quot;#example&quot;, points:[&quot;tc&quot;, &quot;bc&quot;]}
});

&#x2F;&#x2F;allow resizability and draggability
weatherWidget.plug([Y.Plugin.Resize, Y.Plugin.Drag]);

&#x2F;&#x2F;we can plug in the resizeConstrained plugin on the &#x27;resize&#x27; namespace
weatherWidget.resize.plug(Y.Plugin.ResizeConstrained, {
  minWidth: 250,
  minHeight: 170,
  maxWidth: 250,
  maxHeight: 300,
  preserveRatio: false
});

weatherWidget.render();</pre>


</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Resize a node.">
                                        <a href="simple-resize.html">Simple Resize</a>
                                    </li>
                                
                            
                                
                                    <li data-description="A simple resize implementation that utilizes the ResizeConstrained plugin to set min/max dimensions and to lock in the resized element&#x27;s aspect ratio.">
                                        <a href="constrain-resize.html">Constrain a Resize</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example shows an 8-way image resize, providing the CSS needed for a common image-resize visual treatment.">
                                        <a href="image-resize.html">8-way Image Resize</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Plugs a widget with resize functionality.">
                                        <a href="simple-resize-plugin.html">Widget with simple Resize Plugin</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Plugs a widget with resize functionality, and implements ResizeConstrained">
                                        <a href="constrain-resize-plugin.html">Widget with Resize Plugin under constraints</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
